<template>
<basicContainer>
  <dc-section name="viewOrigin"
    title="播放终端占比">
    <template slot="body">
      <div class="view-origin clearfix">
        <dc-section-item class="item-in-row" :center=true :style="{width: !terminalOpt? '100%' : ''}">
          <div v-if="!terminalOpt"
            slot="body"
            class="pie-empty none">
            暂无数据
          </div>
          <template v-else slot="body">
            <data-echart :opts="terminalOpt"  style="width: 690px; height: 270px;"></data-echart>
            <!-- <chart
              ref="gender"
              :options="terminalOpt" style="width: 690px; height: 270px;margin-top:-10px"></chart> -->
           </template>
        </dc-section-item>
      </div>
    </template>
  </dc-section>
  </basicContainer>
</template>
<script>
import DcSection from '../components/section'
import DcSectionItem from '../components/sectionItem'
import {calcTotalFun, sortFun } from '../components/constants'
import DataEchart from '../components/dataEchart'
import basicContainer from '../common/basicContainer'

export default {
  name: 'viewOrigin',
  data() {
    return {
      palySource: {
        play_proportion: {
          android: 10,
          ios: 14,
          pc: 15,
          h5: 16,
          out: 17
        }
      }
    }
  },
  computed: {
    terminalOpt() {
      // 加载成功，没有数据
      if (Object.keys(this.palySource).length === 0 || Object.values(this.palySource.play_proportion).every(item => item === 0)) {
        return null
      }
      // 加载成功，有数据
      else {
        let propFun = calcTotalFun(this.palySource.play_proportion)
        const vMap = {
          'Android端': propFun(this.palySource.play_proportion.android || 0),
          'iPhone端': propFun(this.palySource.play_proportion.ios || 0),
          'PC端': propFun(this.palySource.play_proportion.pc || 0),
          'H5端': propFun(this.palySource.play_proportion.h5 || 0),
          '站外端': propFun(this.palySource.play_proportion.out || 0),
        }
        let palySourceDataArr = sortFun([{
          value: this.palySource.play_proportion.android || 0,
          name: 'Android端',
          icon: 'circle'
        }, {
          value: this.palySource.play_proportion.ios || 0,
          name: 'iPhone端',
          icon: 'circle'
        }, {
          value: this.palySource.play_proportion.pc || 0,
          name: 'PC端',
          icon: 'circle'
        }, {
          value: this.palySource.play_proportion.h5 || 0,
          name: 'H5端',
          icon: 'circle'
        }, {
          value: this.palySource.play_proportion.out || 0,
          name: '站外端',
          icon: 'circle'
        }], vMap)
        let formatter = function (name) {
          return `${name}: ${vMap[name]}%`
        }
        return {
          legend: [{
            left: '260px',
            top: '70px',
            align: 'left',
            orient: 'vertical',
            textStyle: {
              fontSize: 14,
              color: '#212121',
              padding: [0,0,0,6]
            },
            formatter,
            data: [...palySourceDataArr].slice(0,3)
          },
          {
            left: '437px',
            top: '70px',
            align: 'left',
            orient: 'vertical',
            textStyle: {
              fontSize: 14,
              color: '#212121',
              padding: [0,0,0,6]
            },
            formatter,
            data: [...palySourceDataArr].slice(3,palySourceDataArr.length)
          }],
          color: ['#55CBF2', '#8BE09C', '#FFC573', '#FF9DB5','#FFB082'],
          series: [{
            type: 'pie',
            name: '终端页面',
            center: ['18%', '45%'],
            radius: ['40%', '80%'],
            startAngle: 90,
            data: palySourceDataArr
          }]
        }
      }
    }
  },
  methods: {
    percent (val) {
      let count = 0
      for (let key in this.palySource.play_proportion) {
        count += this.palySource.play_proportion[key]
      }
      return `${Math.round(val/(count || 100) * 100)}%`
    },
  },
  components: {
    DcSection,
    DcSectionItem,
    DataEchart,
    basicContainer
  }
}

</script>
<style lang="less" scoped>
/deep/ .dc-section-title{
    font-weight: bolder;
    font-size: 16px;
    color: #212121;
}
  #dc-section_viewOrigin{
        &.dc-section{
          margin-bottom: 0;
        }
      }

.view-origin {
  display: flex;
  .dc-section-item1{
    margin-top: 20px;
  }
}
.terminal-legend {
  position: absolute;
  display: float;
  left: 360px;
  top: 80px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  p {
    line-height: 34px;
    font-size: 18px;
    color: #212121;
    cursor: default;
  }
}
.item-in-row {
  position: relative;
  float: left;
  width: 490px;
  box-sizing: border-box;
  border:none;
}
  .pie-empty {
    position: relative;
    // width: 345px;
    height: 250px;
    bottom: 20px;
    // float: left;
  }

  .pie-empty-wrapper {
    position: absolute;
    left: 95px;
    top: 27px;
    width: 190px;
    height: 190px;
    line-height: 190px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-radius: 50%;
    background-color: #ccc;
  }


</style>
